<html>
<head>
	<title>PURE Unobtrusive Rendering Engine</title>
	<script src="../libs/mootools.js" type="text/javascript" charset="utf-8"></script>
	<script src="../libs/pure.js"></script>
</head>
<body>
	<!-- HTML template -->
	<ol>
		<!-- Explanation of the classes of the LI:
			* 	"animals" points to an array and will trigger an iteration
			
			* 	"name" points to the property within the array and will set 
				the node value of the LI
		 -->
		<li class="animals name"></li>
	</ol>

	<script>
		// animals is an array and will trigger an iteration
		var data = {
			animals:[
				{name:'bird'},
				{name:'cat'},
				{name:'dog'},
				{name:'mouse'}
			]
		};
		//example with mootools
		$(document).getElement('ol').autoRender(data);
	</script>
</body>
</html>